<template>
  <el-menu
    :default-active="$route.path"
    router
    class="el-menu-demo"
    mode="horizontal"
    background-color="#003399"
    text-color="#fff"
    active-text-color="white"
  >
    <el-menu-item>
      <div style="width: 120px">
        <img style="height:45px" alt="Vue logo" src="@/assets/logo.png">
      </div>
    </el-menu-item>
    <el-menu-item class="el-menu-tab" index="/home">首页</el-menu-item>
    <el-menu-item class="el-menu-tab" index="/develop">开发者</el-menu-item>
    <el-menu-item class="el-menu-tab" index="/shoppingMall">商城</el-menu-item>
    <el-menu-item class="el-menu-tab" index="/challenge">挑战赛</el-menu-item>
    <el-menu-item class="el-menu-avatar">
      <div v-if="token === '' ">
        <el-button type="text" class="button" @click="login1">登录 | 注册</el-button>
      </div>
      <div v-if="token !== '' ">
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ account }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="personCenter">个人中心</el-dropdown-item>
              <el-dropdown-item @click="purse">钱包</el-dropdown-item>
              <el-dropdown-item @click="set">设置</el-dropdown-item>
              <el-dropdown-item @click="message">消息提醒</el-dropdown-item>
              <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-menu-item>
  </el-menu>
</template>

<style scoped lang="scss">

.el-menu-demo {
  margin-top: -8px;
  margin-left: -8px;
  margin-right: -8px;
}

.el-menu-tab {
  transform: translate(600px);
  margin-left: 30px;
  font-size: 17px;
}

.el-menu-avatar {
  transform: translate(750px);
}

.button {
  color: #FFFFFF;
  font-size: 17px;
}
.button1 {
  color: #FFFFFF;
  font-size: 17px;
}
.button2 {
  color: #FFFFFF;
  font-size: 17px;
}
.el-dropdown-link {
  color: #FFFFFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>

<script lang="ts" src="../common/navigator.ts">

</script>
